<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    {% load static %}
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>人员设置</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/themes/default/easyui.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/themes/icon.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/layout.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/core.css' %}">
    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.easyui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/easyui-lang-zh_CN.js' %}"></script>
    <script type="text/javascript">
		var url;
		function newUser(){
			$('#dlg').dialog('open').dialog('setTitle','新增用户');
			$('#fm2').form('clear');
			url = 'save_user';
		}
		function editUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','编辑用户');
				$('#fm2').form('load',row);
				url = 'update_user?worker_number='+row.worker_number;
			}
		}

		function saveUser(){
			$('#fm2').form('submit',{
				url: url,
				onSubmit: function(){
					return $(this).form('validate');
				},
				success: function(result){
					var result = eval('('+result+')');
					if (result.success){
						$('#dlg').dialog('close');		// close the dialog
						$('#dg').datagrid('reload');	// reload the user data
					} else {
						$.messager.show({
							title: '错误',
							msg: result.msg
						});
					}
				}
			});
		}

		function removeUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('确定删除','确定删除永久删除用户?',function(r){
					if (r){
						$.post('remove_user',{worker_number:row.worker_number},function(result){
							if (result.success){
								$('#dg').datagrid('reload');	// reload the user data
							} else {
								$.messager.show({	// show error message
									title: 'Error',
									msg: result.msg
								});
							}
						},'json');
					}
				});
			}
		}


		function check_data(str) {
              var worker_number= $('#worker_number').val().trim();
              var name=$("#name").val().trim();
              var email =$("#email").val().trim();
              var phone =$("#phone").val().trim();
              if(worker_number==""||worker_number==null)
              {
                //alert("Fill Order Type !");
                $.messager.alert('信息提示','请输入工号 !','info');
              }
              else if(name==""||name==null)
              {
                $.messager.alert('信息提示','请输入姓名 !','info');
              }

            }

    function find_data() {
        $('#dg').datagrid('load',{
		worker_number: $('#worker_number').val().trim(),
		name: $('#name').val().trim(),
		email: $('#email').val().trim(),
		phone: $('#phone').val().trim(),
	});
    }

    </script>

</head>
<body>
<div style="background:#fafafa;padding:10pt 5pt 10pt;">
    <form id="fm" method="post">
        <table style="width:100%;height:auto">
            <tr>
                <td>

                    <a href="#" class="easyui-linkbutton" plain="true" icon="icon-search" onclick="find_data()">查询</a>
                </td>
                <td><span id="showTip"></span></td>

            </tr>
        </table>
        <hr></hr>
        <table id="tt" style="width:100%;height:auto">
            <tr>
                <td style="border-bottom:1px solid #C0C0C0" width="20%">工号:</td>
                <td width="30%"><input type="text" name="worker_number" id="worker_number"></input></td>
                <td style="border-bottom:1px solid #C0C0C0" width="20%">姓名:</td>
                <td width="30%"><input type="text" name="name" id="name"></input></td>
            </tr>
            <tr>
                <td style="border-bottom:1px solid #C0C0C0" width="20%">邮箱:</td>
                <td width="30%"><input type="text" name="email" id="email"></input></td>
                <td style="border-bottom:1px solid #C0C0C0" width="20%">联系电话:</td>
                <td width="30%"><input type="text" name="phone" id="phone"></td>
            </tr>
        </table>
        <hr></hr>


    </form>

    <table id="dg" title="用户列表" class="easyui-datagrid" style=""
           url="get_users"
           toolbar="#toolbar" pagination="true"
           rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
        <tr>
            <th field="worker_number" width="25%" sortable="true">工号</th>
            <th field="name" width="25%" sortable="true">姓名</th>
            <th field="phone" width="25%" sortable="true">手机</th>
            <th field="email" width="25%" sortable="true">邮箱</th>
        </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增用户</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">删除用户</a>
    </div>

</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">用户信息</div>
    <form id="fm2" method="post" novalidate>
        <div class="fitem">
            <label>工号:</label>
            <input name="worker_number" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>姓名:</label>
            <input name="name" class="easyui-validatebox" required="true">
        </div>
        <div class="fitem">
            <label>手机:</label>
            <input name="phone">
        </div>
        <div class="fitem">
            <label>邮箱:</label>
            <input name="email" class="easyui-validatebox" validType="email">
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>

</div>
</body>


</html>